修改input file的默认样式，js获取input file的文件名，关于修改样式后input file的兼容性问题 |
您所在的位置：网站首页 › js 获取input file › 修改input file的默认样式，js获取input file的文件名，关于修改样式后input file的兼容性问题 |
|
**今天来和大家分享一下input type="file"的默认样式修改相关问题** 首先文件默认条件下在各大浏览器的样式是不一样的，而且很丑，相信很多做前端开发的朋友都需要修改一下它的默认样子。因此我在这用两种方式解决以下问题： 1.隐藏input，用label代替input标签显示在页面上，代码如下： input[type="file"] { display: none; } label{ display: inline-block; height: 30px; line-height: 30px; width: 50px; text-align: center; background: #1f64b0; color: #fff; cursor: pointer; } input[type="text"]{ height: 25px; width:150px; position: relative; top: -1px; } p{color: #f00;}只获取文件名 浏览获取文件路劲，但是浏览器会默认用fakepath代替文件的真实路劲 浏览 function uploadFile(e) { var name = event.target.files[0].name;//获取上传的文件名 $('#txtFile').val(name); }2.，以前我一直是用第一种方法来修改file的默认样式的，没有任何问题 但这次做项目的时候，发现这样写，当浏览器调到“兼容模式”后，上传文件就会跳转到一个空白的页面。所以也就有了等会要介绍的第二种方法了。将的透明度设为0，然后将文本框和按钮定位在file上面，来实现上传文件的功能，代码如下： Document .file { position:relative; width:226px; height:30px; border:1px #ccc solid; } .file input { font-size:16px; margin:0; padding:0; position:relative; vertical-align:middle; outline:none; } .file input[type="text"] { border:3px none; width:162px; z-index:4; font-size: 12px; padding-left: 10px; } .file input[type="button"] { width:54px; height:30px; z-index:2; background: #1f64b0; color: #fff; outline: none; border: none; } .file input[type="file"] { position:absolute; right:0px; height:30px; opacity:0; z-index:3; cursor: pointer; } p{color: #f00;}在浏览器的兼容模式下，用label修改的input file上传文件会跳转到空白页面，所以换一种方式来改变样式 window.onload=function(){ var file=document.querySelector(".file input[type='file']"); var text=document.querySelector(".file input[type='text']"); file.addEventListener("change",assign,false); function assign(){ text.value=file.value; } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |